const VueLoaderPlugin = require('vue-loader/lib/plugin');

const path = require("path");

// 需安装，每次打包自动清空 dist：编译是数组从后往前开始，所以在css编译时使用
// const {CleanWebpackPlugin} = require('clean-webpack-plugin');

// 需安装，可将CSS提取到单独的文件：https://webpack.docschina.org/plugins/mini-css-extract-plugin/
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    // 需安装，优化和压缩 CSS：https://webpack.docschina.org/plugins/css-minimizer-webpack-plugin/
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
// 需安装：代码混淆。https://www.npmjs.com/package/webpack-obfuscator
// const WebpackObfuscator = require('webpack-obfuscator');


// webpack5自带：https://webpack.docschina.org/plugins/terser-webpack-plugin/
const TerserPlugin = require("terser-webpack-plugin");


module.exports = [{
        target: ['web', 'es5'],
        // mode: process.env.NODE_ENV,
        // mode: 'development',
        mode: 'production',
        entry: {
            "mapgis-gm-webcomponents-bigscreen": './index.js',
        },
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: '[name].js',
            // clean: true, // 在每次构建前清理 /dist 文件夹
        },
        plugins: [
            new VueLoaderPlugin(),

            // new WebpackObfuscator ({
            //     rotateStringArray: true
            // }, [])
        ],
        module: {
            rules: [{
                    test: /\.vue$/,
                    loader: 'vue-loader'
                },
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: 'babel-loader'
                },
                {
                    test: /\.css$/,
                    use: [
                        "style-loader",
                        "css-loader",
                        'postcss-loader',

                    ]
                },
                {
                    test: /\.scss$/,
                    use: [
                        'style-loader',
                        'css-loader',
                        'postcss-loader',
                        'sass-loader',
                    ]
                },
                {
                    test: /\.(png|svg|jpg|jpeg|gif)$/i,
                    type: 'asset/resource',
                    generator: {
                        filename: 'assets/imgs/[hash][ext]',
                    }
                },
                {
                    test: /\.(woff|woff2|eot|ttf|otf)$/i,
                    type: 'asset/resource',
                    generator: {
                        filename: 'assets/fonts/[hash][ext]',
                    }
                },
            ]
        },
        resolve: {
            alias: {
                "#*": path.join(__dirname, "./*"),
                "@public": path.join(__dirname, "./public"),
                "@src": path.resolve(__dirname, "./src"),
                "@assets": path.join(__dirname, "./src/assets"),
                "@mixins": path.join(__dirname, "./src/mixins"),
                "@components": path.join(__dirname, "./src/components"),
                "@images": path.join(__dirname, "./src/assets/images")
            },
            extensions: [".*", ".js", ".vue", ".json"]
        },
        performance: { // 性能
            hints: 'warning', // 枚举 false 关闭性能提示
            // maxEntrypointSize: 10240000000000, // 最大入口文件大小
            // maxAssetSize: 10240000000000, // 最大资源文件大小
        },
        optimization: { // 优化
            minimize: true,
            minimizer: [
                new TerserPlugin({ // 压缩 js
                    terserOptions: {
                        format: {
                            comments: false,
                        },
                    },
                    extractComments: false,
                }),
            ]
        }
    },
    {
        // mode: process.env.NODE_ENV,
        // mode: 'development',
        mode: 'production',
        entry: {
            "main": ['./src/assets/styles/index.scss','./src/assets/styles/ruoyi.scss'],
        },
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'assets/js/[name].js', // 都放指定目录下
            clean: true, // 在每次构建前清理 /dist 文件夹
        },
        plugins: [
            // new CleanWebpackPlugin(),// 这里加
            new MiniCssExtractPlugin({
                // filename: '[name].css'
            }),
        ],
        module: {
            rules: [{
                    test: /\.css$/,
                    use: [
                        "style-loader",
                        "css-loader",
                        'postcss-loader'
                    ]
                },
                {
                    test: /\.scss$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        'postcss-loader',
                        'sass-loader',
                    ]
                },
                {
                    test: /\.(png|svg|jpg|jpeg|gif)$/i,
                    type: 'asset/resource',
                    generator: {
                        filename: 'assets/imgs/[hash][ext]',
                    }
                },
                {
                    test: /\.(woff|woff2|eot|ttf|otf)$/i,
                    type: 'asset/resource',
                    generator: {
                        filename: 'assets/fonts/[hash][ext]',
                    }
                },
            ]
        },
        resolve: {
            extensions: [".*", ".js", ".vue", ".json"]
        },
        performance: { // 性能
            hints: 'warning', // 枚举 false 关闭性能提示
            // maxEntrypointSize: 10240000000000, // 最大入口文件大小
            // maxAssetSize: 10240000000000, // 最大资源文件大小
        },
        optimization: { // 优化
            minimize: true,
            minimizer: [
                new CssMinimizerPlugin(), //压缩css
                new TerserPlugin({ // 压缩 js
                    terserOptions: {
                        format: {
                            comments: false,
                        },
                    },
                    extractComments: false,
                }),
            ]
        }
    }
];